<template>
<!-- APP版本控制 begin -->
	<div class="main main-version">
		<div class="main-hd">
			<h2>{{$t('m.VerDetail')}}</h2>
		</div>
		<div class="main-hd v-header">
<!--			最后做用户权限时需要加v-show="level == 1"-->
			<Button
				type="primary"
				@click="handleClick(0, '', '', '', '', '','')"
			>{{$t('m.addNRe')}}</Button>
		</div>
		<div class="main-bd">
			<div class="content-wrap">
				<Tabs @on-click="banben">
					<TabPane label="android" icon="social-android"></TabPane>
					<TabPane label="ios" icon="social-apple"></TabPane>
				</Tabs>
				<div class="list version-list" id="version_list">
					<table class="table table-hover table-condensed" id="version_list_table" border>
						<thead>
							<tr>
								<td width="100">{{$t('m.VerNum')}}</td>
								<td width="200">{{$t('m.DLink')}}</td>
								<td width="60">{{$t('m.onLState')}}</td>
								<td width="150">{{$t('m.cTime')}}</td>
								<td width="150">{{$t('m.uTime')}}</td>
								<td width="60">{{$t('m.isFU')}}</td>
								<td width="200">{{$t('m.nVerSu')}}</td>
								<td width="100">{{$t('m.operate')}}</td>
							</tr>
						</thead>
						<tbody>
							<tr v-for="item in versionList">
								<td>{{item.version}}</td>
								<td>{{item.downloadUrl}}</td>
								<td>{{item.status}}</td>
								<td>{{item.ctime}}</td>
								<td>{{item.utime}}</td>
								<td>{{item.isForceUpdate}}</td>
								<td>{{ item.description }}</td>
								<td>
									<Button
										type="primary"
										size="small"
										@click="handleClick(1, item.id, item.version, item.status, item.isForceUpdate, item.downloadUrl, item.platform, item.description)"
									>{{$t('m.edit')}}</Button>
								</td>
							</tr>
						</tbody>
					</table>
					<Page
							:total="total"
							:current="page"
							:page-size-opts="[1, 5, 10, 20, 40, 60, 100]"
							show-total
							show-elevator
							show-sizer
							@on-change="handleCurrentChange"
							@on-page-size-change="handleSizeChange"
              style="margin-top: 20px;float: right;"
					></Page>
				</div>

				<div>
					<Modal
						v-model="modal5"
						:title="$t('m.VerDetail')"
						@on-ok="ok"
						width="750">

						<Form ref="verForm" :model="verForm" :label-width="100" class="version-form">
							<FormItem :label="this.$t('m.ShowVer')" prop="versionName">
								<Input v-model="verForm.version" :placeholder="$t('m.inVer')"></Input>
							</FormItem>
							<FormItem :label="$t('m.deType')" prop="type">
								<Select v-model="verForm.platform" placeholder="please select a type">
									<Option value='android'>android</Option>
									<Option value='ios'>iOS</Option>
								</Select>
							</FormItem>
							<FormItem :label="$t('m.isFU')">
								<RadioGroup v-model="verForm.isForceUpdate">
									<Radio :label="0">No</Radio>
									<Radio :label="1">Yes</Radio>
								</RadioGroup>
							</FormItem>
							<FormItem :label="$t('m.onLState')">
								<RadioGroup v-model="verForm.status">
									<Radio :label="0">Offline</Radio>
									<Radio :label="1">Online</Radio>
								</RadioGroup>
							</FormItem>
							<FormItem :label="$t('m.DLink')" prop="downloadUrl">
								<Input v-model="verForm.downloadUrl" placeholder="Please input download link"></Input>
							</FormItem>
							<FormItem :label="$t('m.APPuSub')" prop="description">
								<Input v-model="verForm.description" type="textarea" :autosize="{minRows: 3,maxRows: 5}" placeholder="please input description"></Input>
							</FormItem>
						</Form>
					</Modal>
				</div>
			</div>
		</div>
	</div>
<!-- APP版本控制 end -->
</template>

<script>
	export default {
		name: 'version',
		data() {
			return {
				page: 1,
				total: 0,
				pageSize: 10,
				uurl:'',
				versionList: [],
				modal5: false,
				state: '',
				id: '',
				versionModel: 2,
				level: localStorage.level,
				verForm: {
					version:'1.1.1',
					platform: '',
					status: 0,
					isForceUpdate: 0,
					downloadUrl: '',
					description: '',

				}
			}
		},
		methods: {
			// 页码改变的回调，返回改变后的页码
			handleCurrentChange (val) {
				this.loading = true;
				this.page = val;
				this.getVersion();
			},
			// 切换每页条数时的回调，返回切换后的每页条数
			handleSizeChange (val) {
				this.pageSize = val;
				this.getVersion();
			},
			getVersion(page) {
				var pageNumber = this.page
				var pageSize = this.pageSize
				var url1 = this.uurl + '&' + 'pageSize=' + pageSize + '&' + 'pageNumber'+ '=' + pageNumber
				// var _this = this;

				this.$http.get(url1)
						.then((response)=>{
							this.versionList = response.body.result.list
							this.total = response.body.result.size
						});
			},
			banben(e) {
				e == 0 ? this.versionModel = 2 : this.versionModel = 1;
				this.urll();


			},
			handleClick (state, id, version, status, isForceUpdate, downLoadUrl, platform, description) {
				this.state = state
				this.modal5 = true;
				this.id = id;
				this.verForm.isForceUpdate = isForceUpdate;
				this.verForm.platform = platform;
				this.verForm.version = version;
				this.verForm.status = status;
				this.verForm.downloadUrl = downLoadUrl;
				this.verForm.description = description

			},
			ok() {
				let param = { ...this.verForm };

				// console.log(param);
				this.id == '' ? '' : param.id = this.id;
				let port = this.state == 0 ? '/add' : '/update';
				// console.log(port)

				this.$http.post('/api/laocai/sys/app-version'+port,param).then((res)=>{
					if(res.body.code == 0) {
						// console.log(res)
						this.$Message.success('操作成功');
						this.getVersion()
					} else {
						this.$Message.warning(res.body.message);
					}

				});
			},
			urll(){
				if (this.versionModel == 1){
					this.uurl = '/api/laocai/sys/app-version/list?platform=ios&'
				}else {
					this.uurl = '/api/laocai/sys/app-version/list?platform=android'
				}
				this.getVersion();
			}
		},
		mounted: function() {
			this.uurl = '/api/laocai/sys/app-version/list?platform=andoird'
			this.getVersion();
		},
		filters: {
			statusFormat(val) {
				return val == -1 ? '下线' : '上线';
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '../static/style.css';

	.ivu-modal {
		label {
			margin-bottom: 0;
		}

		textarea.ivu-input {
			font-size: 12px;
		}
	}

	.main-version {
	}

	.v-header {
		padding: 15px 15px 0;
		text-align: right;
	}

	.floatRight {
		float: right;
		margin-top: -50px;
		margin-right: 30px;
	}
</style>
